<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="screen-orientation" content="portrait">
  <title>DateSelector</title>
  <link rel="stylesheet" type="text/css" href="./DateSelector.css?rev=@@hash"/>
  <style>
    body {
      background-color: #fafafa;
    }

    h3 {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #555;
    }

    h3:after {
      content: '';
      position: absolute;
      width: 100px;
      height: 5px;
      left: 50%;
      bottom: 0;
      margin: 0 -50px;
      background: #ddd;
      border-radius: 10px;
    }

    article {
      color: #333;
      line-height: 1.3;
      padding: 0 30px;
      margin: 20px 0;
    }

    p {
      color: #777;
      font-size: 14px;
      margin: 5px 0 0 0;
    }

    .block {
      background: rgb(241, 241, 241);
      border-left: 8px solid #D6DBDF;
      padding: 10px 12px;
      margin: 0 0 15px 0;
      overflow: auto;
    }

    input {
      display: block;
      width: 200px;
      margin: 5px auto 10px;
      padding: 5px 20px;
      border: 1px solid #cbcbcb;
      border-radius: 8px;
    }
  </style>
</head>


<body>

<h3>DateSelector.</h3>
<article>
  <p>0.请在移动端下打开~~</p>
  <p>1.点击下面的输入演示样式</p>
  <input id="date-selector-input" type="text" placeholder="点我~~看固定效果" disabled/>
  <div class="block">
    优化版的自定义功能不仅是【单位】自定义<br/><br/>
    【时间范围】也可以自定义,并且尽可能的进行数据校正<br/><br/>
    下面的input会展现【2011年13月-27日 102时12分 ~ 2020年10月21日 20时20分】的效果<br/><br/>
  </div>
  <input id="date-selector-inputs" type="text" placeholder="点我~~看自定义效果" disabled/>
  <p>2.如何引用css和js文件？</p>
  <div class="block">
    sass文件:引用DateSelector/DateSelector.scss<br/><br/>
    css文件:引用DateSelector/DateSelector.css<br/><br/>
    js文件:引用DateSelector/DateSelector.js<br/><br/>
  </div>
  <p>3.如何调用构造函数？</p>
  <div class="block">
    基本格式：new DateSelector({ ... });<br/><br/>
    参数配置:<br/>
    input : {String}，点击触发插件的input框的id<br/><br/>
    container ： {String}，插件即将插入的容器id<br/><br/>
    type ：{0或1}，0为自定义插件的日期单位(不带tab切换)，1为固定插件的日期单位为【年月日】【时分】(带tab切换)<br/><br/>
    param : {Array},例如 [1,1,0,0,0]，分别设置['year','month','day','hour','minute'],1为需要，0为不需要,需要为连续的1
    <br/><br/>
    beginTime : {Array},空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点如[2011,13,-27,102,12]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
    endTime : {Array},空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点如[2020,10,21,20,20]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
    recentTime : {Array},空数组默认设置为当前时间，如需要设置当前的时间点如[2016,8,5,12,0]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
    success : function(arr){} 回调函数，可以自定义结果格式化
  </div>
  <p>3.有什么优越性？</p>
  <div class="block">
    带有加速度的滑动 (•‿•) <br/><br/>

    能够动态设置任意开始和结束【时间点】 (•‿•) <br/>
    是的,你可以设置任何尴尬的时间了!<br/>
    如【2016-11-11 11:11 ~ 2016-12-12 12:12】<br/><br/>

    能够任意设置时间单位的组合 (•‿•) <br/>
    有时候需要"年月日",<br/>
    有时候需要"月日时分",<br/>
    有时候又需要"年月日时分"!<br/><br/>

    能够切换固定样式和自定义样式,简化参数 (•‿•) <br/>
    小清新的样式一定能够打动你冰封的心!<br/><br/>

    能利用我的模型处理更多联动 (•‿•) <br/>
    比如城市三级联动,但是有待开发喔!<br/><br/>

    Trust Me.
  </div>
  <p>4.有什么局限性？</p>
  <div class="block">
    样式主题可能和你的产品不符 >.< <br/><br/>

    在实际开发过程中,改变主题颜色只能靠自己了~<br/>
    你可以选择改变css<br/>
    或改变sass的全局变量后重新编译<br/><br/>

    如果遇到什么神bug,不要着急<br/>
    这时候,请发起issue<br/><br/>

    Trust Me. Again.
  </div>
</article>

<div id="targetContainer"></div>
<div id="targetContainers"></div>


<script src="./DateSelector.js"></script>
<script>
  //---------------------函数调用开始---------------------
  new DateSelector({
    input: 'date-selector-input',//点击触发插件的input框的id
    container: 'targetContainer',//插件插入的容器id
    type: 1,
    //0：不需要tab切换，自定义滑动内容，建议小于三个；
    //1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
    param: [1, 1, 1, 1, 1],
    //设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
    beginTime: [2017, 5, 7, 1, 1],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
    endTime: [2027, 5, 7, 12, 2],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
    recentTime: [2017, 5, 9, 2, 2],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
    success: function (arr, arr2) {
      alert('打开控制台查看结果');
      console.log(arr, '--- 数字结果');
      console.log(arr2, '--- 字符串结果');
    }//回调
  });
  //---------------------函数调用结束---------------------
  //月份从1开始

  new DateSelector({
    input: 'date-selector-inputs',//点击触发插件的input框的id
    container: 'targetContainers',//插件插入的容器id
    type: 0,
    //0：不需要tab切换，自定义滑动内容，建议小于三个；
    //1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
    param: [0, 0, 0, 1, 1],
    //设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
    beginTime: [ 8, 0],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
    endTime: [19, 59],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
    recentTime: [8, 0],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
    success: function (arr, arr2) {
      alert('打开控制台查看结果');
      console.log(arr, '--- 数字结果');
      console.log(arr2, '--- 字符串结果');
    }//回调
  });
</script>

</body>
</html>